<script lang="tsx">
import useRender from "@/utils/hooks/render";
import "@nutui/nutui-taro/dist/packages/textarea/style.mjs";
import { nextTick } from "@tarojs/taro";
import { Textarea } from "@tarojs/components";
import { computed, useCssModule } from "vue";

export default {
  name: "textarea-field",
  props: {
    fieldValue: String,
    showCount: {
      type: Boolean,
      default: true,
    },
    maxLength: {
      type: [String, Number],
      default: 200,
    },
  },
  setup(props, ctx) {
    const style = useCssModule();

    useRender(() => (
      <div class="nut-textarea">
        <Textarea
          //      class="nut-textarea__textarea"
          class={`${style["textarea"]} nut-textarea__textarea`}
          style={{ minHeight: "150px" }}
          showCount
          rows="5"
          max-length={props.maxLength}
          value={props.fieldValue}
          onInput={(e) => {
            nextTick(() => {
              ctx.emit("field-change", e.detail.value);
            });
          }}
        />
        {props.showCount && (
          <text class="nut-textarea__limit">
            {props.fieldValue ? props.fieldValue.length : 0}/{props.maxLength}
          </text>
        )}
        {/* <nut-textarea
          //  modalValue={modelValue.value}
          limit-show
          max-length="200"
          rows="5"
          clearable
          placeholder=" "
          onUpdate:model-value={(e) => {
            nextTick(() => ctx.emit("field-change", e));
          }}
        ></nut-textarea> */}
      </div>
    ));
    return {};
  },
};
</script>

<style lang="scss" module>
// 写.textarea textarea的话会编译成textarea_[hash] taro-textarea
.textarea > * {
  height: 100% !important;
}
</style>
